.flex {
  display: flex;
}
.flex-di-column {
  flex-direction: column;
}
.juco-center {
  justify-content: center;
}
.juco-spb {
  justify-content: space-between;
}
.juco-spa {
  justify-content: space-around;
}
.juco-spe {
  justify-content: space-evenly;
}
.alco-spa {
  align-content: space-around;
}
.alco-spe {
  align-content: space-evenly;
}
.alco-spb {
  align-content: space-between;
}
.alit-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}

.grid {
  display: grid;
}

.fonS-11 {
  font-size: 11px;
}
.fonS-12 {
  font-size: 12px;
}
.fonS-13 {
  font-size: 13px;
}
.fonS-14 {
  font-size: 14px;
}
.fonS-15 {
  font-size: 15px;
}
.fonS-16 {
  font-size: 16px;
}
.fonS-17 {
  font-size: 17px;
}
.fonS-18 {
  font-size: 18px;
}
.fonS-19 {
  font-size: 19px;
}
.fonS-20 {
  font-size: 20px;
}
.fonS-21 {
  font-size: 21px;
}
.fonS-22 {
  font-size: 22px;
}
.fonS-23 {
  font-size: 23px;
}
.fonS-24 {
  font-size: 24px;
}
.fonS-25 {
  font-size: 25px;
}
.fonS-26 {
  font-size: 26px;
}
.fonS-27 {
  font-size: 27px;
}
.fonS-28 {
  font-size: 28px;
}
.fonS-29 {
  font-size: 29px;
}
.fonS-30 {
  font-size: 30px;
}
.fonS-31 {
  font-size: 31px;
}
.fonS-32 {
  font-size: 32px;
}
.fonS-33 {
  font-size: 33px;
}
.fonS-34 {
  font-size: 34px;
}
.fonS-35 {
  font-size: 35px;
}
.fonS-36 {
  font-size: 36px;
}
.fonS-37 {
  font-size: 37px;
}
.fonS-38 {
  font-size: 38px;
}
.fonS-39 {
  font-size: 39px;
}
.fonS-40 {
  font-size: 40px;
}
.fonS-41 {
  font-size: 41px;
}
.fonS-42 {
  font-size: 42px;
}
.fonS-43 {
  font-size: 43px;
}
.fonS-44 {
  font-size: 44px;
}
.fonS-45 {
  font-size: 45px;
}
.fonS-46 {
  font-size: 46px;
}
.fonS-47 {
  font-size: 47px;
}
.fonS-48 {
  font-size: 48px;
}
.fonS-49 {
  font-size: 49px;
}
.fonS-50 {
  font-size: 50px;
}

.fonW-500 {
  font-weight: 500;
}
.fonW-600 {
  font-weight: 600;
}
.fonW-700 {
  font-weight: 700;
}
.fonC-FFF {
  color: #fff;
}
.fonC-333 {
  color: #333;
}
.fonC-999 {
  color: #999;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.bgpink {
  background-color: pink;
}
.bgred {
  background-color: red;
}
.bgturquoise {
  background-color: turquoise;
}

.w_h {
  width: 100%;
  height: 100%;
}
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}

.text-limit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -o-box-orient: vertical;
  -ms-box-orient: vertical;
  -moz-box-orient: vertical;
  display: -webkit-box;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  -o-line-clamp: 1;
  -ms-line-clamp: 1;
  -moz-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  -o-line-clamp: 2;
  -ms-line-clamp: 2;
  -moz-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -o-line-clamp: 3;
  -ms-line-clamp: 3;
  -moz-line-clamp: 3;
  line-clamp: 3;
}

.line-clamp-5 {
  -webkit-line-clamp: 5;
  -o-line-clamp: 5;
  -ms-line-clamp: 5;
  -moz-line-clamp: 5;
  line-clamp: 5;
}

.line-clamp-6 {
  -webkit-line-clamp: 6;
  -o-line-clamp: 6;
  -ms-line-clamp: 6;
  -moz-line-clamp: 6;
  line-clamp: 6;
}

.line-clamp-7 {
  -webkit-line-clamp: 7;
  -o-line-clamp: 7;
  -ms-line-clamp: 7;
  -moz-line-clamp: 7;
  line-clamp: 7;
}

.back-svg {
  width: 20px;
  height: 20px;
}
.mrl-24 {
  margin-left: 24px;
}
.mrr-24 {
  margin-right: 24px;
}
